<template>
    <div class="container">
        <div class="up_container">
            <el-carousel :interval="3000" type="card" height="340px" style="width: 90%;">
                <el-carousel-item v-for="item in this.imgList" :key="item.id">
                    <img :src="item.url" style="width: 100%; height: 100%; object-fit: cover;">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="down_container">
            <div class="alarm_container">
                <el-card class="box-card" style="height: 98%;width: 98%;">
                    <div slot="header" class="clearfix">
                        <span>告警</span>
                        <el-button class="botton_more" type="text" @click="botton_warn_more_clicked">更多</el-button>
                    </div>
                    <div v-for="o in this.warnList.slice(0, 8)" :key="o.warningId" class="text item">
                        <div class="el-icon-warning-outline" style="margin-top: 3px;width: 5%;"></div>
                        <div style="width: 70%;display: flex;align-items: center;justify-content: left;">{{ o.warningTitle
                        }}</div>
                        <div style="width: 30%;display: flex;align-items: center;justify-content: right;">
                            {{ " 来自 " + o.warningSender }}
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="warn_container">
                <el-card class="box-card" style="height: 98%;width: 98%;">
                    <div slot="header" class="clearfix">
                        <span>预警</span>
                        <el-button class="botton_more" type="text" @click="botton_alarm_more_clicked">更多</el-button>
                    </div>
                    <div v-for="o in this.alarmList.slice(0, 8)" :key="o.alarmId" class="text item">
                        <div class="el-icon-alarm-clock" style="margin-top: 3px;width: 5%;"></div>
                        <div style="width: 70%;display: flex;align-items: center;justify-content: left;">{{ o.alarmTitle }}
                        </div>
                        <div style="width: 30%;display: flex;align-items: center;justify-content: right;">
                            {{ " 来自 " + o.alarmSender }}
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="todo_container">
                <el-card class="box-card" style="height: 98%;width: 98%;">
                    <div slot="header" class="clearfix">
                        <div style="display: flex;width: 20%;align-items: center;">
                            <div style="width: 50%;">待办</div>
                            <div v-if="this.todoNumber !== 0" class="red-dot">{{ this.todoNumber }}</div>
                        </div>
                        <el-button class="botton_more" type="text" @click="botton_todo_more_clicked">更多</el-button>
                    </div>
                    <div v-for="o in this.todoList.slice(0, 8)" :key="o.todoId" class="text item">
                        <div class="el-icon-document-checked" style="margin-top: 3px;width: 5%;"></div>
                        <div style="width: 50%;display: flex;align-items: center;justify-content: left;">{{ o.todoType +
                            o.todoId }}
                        </div>
                        <div style="width: 50%;display: flex;align-items: center;justify-content: right;">
                            {{ o.todoTime }}
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>
  
<style scoped>
.container {
    margin: 0 auto;
    margin-top: 10px;
    width: 97%;
    height: 100%;
    justify-content: center;
    background-color: rgb(255, 255, 255);
}

.up_container {
    height: 55%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.down_container {
    height: 45%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alarm_container {
    width: 33.33%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.warn_container {
    width: 33.33%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.todo_container {
    width: 33.33%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.botton_more {
    float: right;
    padding: 3px 0;
}

/* 卡片 */
.text {
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 16px;
}

.item {
    margin-bottom: 8px;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.red-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: small;
}

/* 轮播图 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
<style>
.el-card.is-always-shadow {
    box-shadow: 0 2px 12px 0 #e4e9f3;
}

.el-card__header {
    padding: 3px 20px;
}

.el-card__body {
    padding: 10px 20px;
}
</style>

<script>
import { getAlarmList, getWarnList, getTodoUndoneList, getTodoUndoneNumber } from '../../api/homeData';
export default {
    data() {
        return {
            imgList: [
                { id: 1, url: require('@/assets/1.jpg') },
                { id: 2, url: require('@/assets/2.jpg') },
                { id: 3, url: require('@/assets/3.jpg') },
                { id: 4, url: require('@/assets/4.jpg') },
                { id: 5, url: require('@/assets/5.jpg') },
                { id: 6, url: require('@/assets/6.jpg') },
            ],
            alarmList: [],
            warnList: [],
            todoList: [],
            todoNumber: 0,
        }
    },
    computed: {
        userId() {
            return localStorage.getItem("userId");
        },
    },
    methods: {
        botton_warn_more_clicked() {
            this.$router.push("/Home/Warn");
        },
        botton_alarm_more_clicked() {
            this.$router.push("/Home/Alarm");
        },
        botton_todo_more_clicked() {
            this.$router.push("/Home/ToDoContainer")
        },
        initTableData() {
            getAlarmList(this.userId).then(res => {
                this.alarmList = res.data.data;
            })
            getWarnList(this.userId).then(res => {
                this.warnList = res.data.data;
            })
            getTodoUndoneList(this.userId).then(res => {
                this.todoList = res.data.data;
            })
            getTodoUndoneNumber(this.userId).then(res => {
                this.todoNumber = res.data.data;
            })
        },
    },
    mounted() {
        this.initTableData();
    }
}
</script>
  